import React, { Component } from 'react';
import { Menu, Icon } from 'antd';
import menuConf from '../../conf/menuConf';
import {observer} from 'mobx-react';
const SubMenu = Menu.SubMenu;
@observer
class Menus extends Component {
    
  renderMenus(menuList) {
    return menuList.map((val,idx)=>{
        if (val.subList) {
            return (
                <SubMenu key={val.key} title={<span><Icon type={val.icon} /><span>{val.label}</span></span>}>
                    {this.renderMenus(val.subList)}
                </SubMenu>
            );
        }else{
            return (
                <Menu.Item key={val.key}>
                    <Icon type={val.icon} />
                    <span>{val.label}</span>
                </Menu.Item>
            );
        }
    });
  }
  render() {
    return (
        <Menu
            selectedKeys = {this.props.selectedKeys}
            mode={menuConf.mode}
            theme={menuConf.theme}
            inlineCollapsed={this.props.collapsed}
            onSelect={(item, key, selectedKeys)=>{
                if (this.props.onSelect) {
                    this.props.onSelect(item, key, selectedKeys);
                }
            }}
        >
            {this.renderMenus(menuConf.menuList)}
        </Menu>
      );
  }
}

export default Menus;
